<template>
  <div>
    <div class="content" v-if="headerAdd">
      <el-form :inline="true" :model="formParams" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="formParams.userName" clearable placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="公司名">
          <el-input v-model="formParams.companyName" clearable placeholder="公司名"></el-input>
        </el-form-item>
        <el-button type="primary" @click="btnAdd">新增</el-button>
        <el-button type="primary" plain @click="getList">查询</el-button>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="companyName" label="公司名"></el-table-column>
        <el-table-column prop="promotionConsultant" label="推广顾问"></el-table-column>
        <el-table-column prop="website" label="网址"></el-table-column>
        <el-table-column prop="websiteName" label="网址名"></el-table-column>
        <el-table-column prop="consultantPhone" label="顾问电话"></el-table-column>
        <el-table-column prop="infoStatus" label="账户信息状态"></el-table-column>
        <el-table-column prop="marginStatus" label="保证金状态"></el-table-column>
        <el-table-column prop="qualificationsStatus" label="资质状态"></el-table-column>
        <el-table-column prop="complianceStatus" label="合规状态"></el-table-column>
        <el-table-column prop="creditStatus" label="信用状态"></el-table-column>
        <el-table-column prop="addvStatus" label="加v状态"></el-table-column>
        <el-table-column prop="searchBalance" label="搜索推广余额"></el-table-column>
        <el-table-column prop="searchBudget" label="搜索推广预算"></el-table-column>
        <el-table-column prop="infoFlowBalance" label="信息流余额"></el-table-column>
        <el-table-column prop="infoFlowBudget" label="信息流预算"></el-table-column>
        <el-table-column prop="ecommerceBalance" label="电商推广余额"></el-table-column>
        <el-table-column prop="ecommerceBudget" label="电商推广预算"></el-table-column>
        <el-table-column prop="searchProhibit" label="搜索推广禁推状态"></el-table-column>
        <el-table-column prop="infoFlowProhibit" label="信息流业务端禁推状态"></el-table-column>
        <el-table-column prop="ecommerceProhibit" label="电商推广禁推状态"></el-table-column>
        <el-table-column prop="mediumProhibit" label="媒体端禁推状态"></el-table-column>
        <el-table-column prop="searchPromotionStatus" label="搜索推广状态"></el-table-column>
        <el-table-column prop="infoPromotionStatus" label="信息流状态"></el-table-column>
        <el-table-column prop="ecommercePromotionStatus" label="电商推广状态"></el-table-column>
        <el-table-column prop="industryInfo" label="行业信息"></el-table-column>
        <el-table-column prop="whereCity" label="所在城市"></el-table-column>
        <el-table-column prop="mailAddress" label="通讯地址"></el-table-column>
        <el-table-column prop="contacts" label="联系人"></el-table-column>
        <el-table-column prop="landline" label="座机"></el-table-column>
        <el-table-column prop="phone" label="手机"></el-table-column>
        <el-table-column prop="postalCode" label="邮政编码"></el-table-column>
        <el-table-column prop="email" label="Email"></el-table-column>
        <el-table-column prop="fax" label="传真"></el-table-column>
        <el-table-column prop="invoiceMailingContacts" label="发票邮寄联系人"></el-table-column>
        <el-table-column prop="invoiceMailingPhone" label="发票邮寄联系电话"></el-table-column>
        <el-table-column prop="invoiceMailingCode" label="发票邮寄邮政编码"></el-table-column>
        <el-table-column prop="invoiceMailingAddress" label="发票邮寄地址"></el-table-column>
        <el-table-column prop="creditAuth" label="信用认证"></el-table-column>
        <el-table-column prop="creditValue" label="信用值"></el-table-column>
        <el-table-column prop="safetyRating" label="安全评分"></el-table-column>
        <el-table-column prop="mailAddress" label="通讯地址"></el-table-column>
        <el-table-column prop="contacts" label="联系人"></el-table-column>
        <el-table-column prop="landline" label="座机"></el-table-column>
        <el-table-column prop="phone" label="手机"></el-table-column>
        <el-table-column prop="postalCode" label="邮政编码"></el-table-column>
        <el-table-column prop="email" label="Email"></el-table-column>
        <el-table-column prop="fax" label="传真"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" @click="handleInitialize(scope.row)">一键初始化</el-button> -->
            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row.accountId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer" v-if="headerAdd">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <add v-if="addShow" :objData="objData" :isEdit="isEdit" @handleCancle="handleCancle"></add>
    <detail v-if="viewShow" :objData="objData" @handleCancle="handleCancle"></detail>
  </div>
</template>
<script>
import { del, list, initInsert } from "@/api/caiwu/zhgl";
import add from "./add.vue";
import detail from "./detail.vue";
export default {
  name: "zhanghugai",
  data() {
    return {
      formParams: {
        userName: null,
        companyName: ""
      },
      addShow: false,
      viewShow: false,
      headerAdd: true,
      value: "",
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 编辑数据
      objData: {},
      isEdit: false
    };
  },
  mounted() {
    this.getList();
  },
  components: {
    add,
    detail
  },
  methods: {
    handleCancle() {
      this.headerAdd = true;
      this.addShow = false;
      this.viewShow = false;
      this.isEdit = false;
      this.getList();
    },
    // 新增
    btnAdd() {
      this.addShow = true;
      this.headerAdd = false;
      this.viewShow = false;
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getList();
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getList();
    },
    // 查询列表
    getList() {
      let parm = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.formParams
      };
      list(parm).then(res => {
        this.tableData = res.rows;
        this.total = +res.total;
      });
    },
    // TODO: 一键初始化
    // handleInitialize(row) {
    //   initInsert({ userId: row.userId }).then(res => {
    //     console.log("res~~~", res);
    //   });
    // },
    // 查看
    handleView(row) {
      this.addShow = false;
      this.headerAdd = false;
      this.viewShow = true;
      this.objData = row;
    },
    // 编辑
    handleEdit(row) {
      this.addShow = true;
      this.headerAdd = false;
      this.viewShow = false;
      this.isEdit = true;
      this.objData = row;
    },
    // 删除
    handleDel(accountId) {
      this.$confirm("确定要删除该条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del({ accountId }).then(res => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped>
.footer {
  display: flex;
  justify-content: end;
  padding-right: 40px;
  padding-top: 23px;
}
.queding {
  padding-bottom: 28px;
  text-align: center;
}
.form-header {
  width: 430px;
  border: none;
}
.slect {
  width: 204px;
}
.content {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
